<!DOCTYPE html>
<html>
<head>
  <title>AngularJS计算器</title>
  <meta charset='utf-8'>
  <meta name="description" content="AngularJS and Angular Code Example for creating Invoices and Invoicing Application">
  <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="http://cdn.bootcss.com/angular.js/1.4.9/angular.min.js"></script>
  <script type="text/javascript" src="js/main.js"></script>
</head>
<body ng-app="invoicing" ng-controller="InvoiceCtrl" >
  <div class="container" width="800px" id="invoice" >
    <div ng-include="'../common/header.html'"></div>
    <div class="row">
      <div class="col-xs-12 heading">
        税收计算器
      </div>
    </div>
    <div class="row branding">
      <div class="col-xs-6">
        <div class="invoice-number-container">
          <label for="invoice-number">编号 #</label><input type="text" id="invoice-number" ng-model="invoice.invoice_number" />
        </div>
      </div>
      <div class="col-xs-6 logo-container">
        <input type="file" id="imgInp" />
        <img ng-hide="logoRemoved" id="company_logo" ng-src="{{ logo }}" alt="your image"/>
        <div>
          <div class="noPrint" ng-hide="printMode">
            <a ng-click="editLogo()" href >编辑Logo</a>
            <a ng-click="toggleLogo()" id="remove_logo" href >{{ logoRemoved ? '显示' : '隐藏' }} logo</a>
          </div>
        </div>
      </div>
    </div>
    <div class="row infos">
      <div class="col-xs-6">
        <div class="input-container"><input type="text" ng-model="invoice.customer_info.name"/></div>
        <div class="input-container"><input type="text" ng-model="invoice.customer_info.web_link"/></div>
        <div class="input-container"><input type="text" ng-model="invoice.customer_info.address1"/></div>
        <div class="input-container"><input type="text" ng-model="invoice.customer_info.address2"/></div>
        <div class="input-container"><input type="text" ng-model="invoice.customer_info.postal"/></div>
        <div class="input-container" data-ng-hide='printMode'>
          <select ng-model='currencySymbol' ng-options='currency.symbol as currency.name for currency in availableCurrencies'></select>
        </div>
      </div>
      <div class="col-xs-6 right">
        <div class="input-container"><input type="text" ng-model="invoice.company_info.name"/></div>
        <div class="input-container"><input type="text" ng-model="invoice.company_info.web_link"/></div>
        <div class="input-container"><input type="text" ng-model="invoice.company_info.address1"/></div>
        <div class="input-container"><input type="text" ng-model="invoice.company_info.address2"/></div>
        <div class="input-container"><input type="text" ng-model="invoice.company_info.postal"/></div>
      </div>
    </div>
    <div class="items-table">
      <div class="row header">
        <div class="col-xs-1">&nbsp;</div>
        <div class="col-xs-5">描述</div>
        <div class="col-xs-2">数量</div>
        <div class="col-xs-2">单价 {{currencySymbol}}</div>
        <div class="col-xs-2 text-right">总计</div>
      </div>
      <div class="row invoice-item" ng-repeat="item in invoice.items" ng-animate="'slide-down'">
        <div class="col-xs-1 remove-item-container">
          <a href ng-hide="printMode" ng-click="removeItem(item)" class="btn btn-danger">[删除]</a>
        </div>
        <div class="col-xs-5 input-container">
          <input ng-model="item.description" placeholder="描述信息" />
        </div>
        <div class="col-xs-2 input-container">
          <input ng-model="item.qty" value="1" size="4" ng-required ng-validate="integer" placeholder="商品数量" />
        </div>
        <div class="col-xs-2 input-container">
          <input ng-model="item.cost" value="0.00" ng-required ng-validate="number" size="6" placeholder="商品单价" />
        </div>
        <div class="col-xs-2 text-right input-container">
          {{item.cost * item.qty | currency: currencySymbol}}
        </div>
      </div>
      <div class="row invoice-item">
        <div class="col-xs-12 add-item-container" ng-hide="printMode">
          <a class="btn btn-primary" href ng-click="addItem()" >[添加]</a>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-10 text-right">合并总计</div>
        <div class="col-xs-2 text-right">{{invoiceSubTotal() | currency: currencySymbol}}</div>
      </div>
      <div class="row">
        <div class="col-xs-10 text-right">税率(%): <input ng-model="invoice.tax" ng-validate="number" style="width:43px"></div>
        <div class="col-xs-2 text-right">{{calculateTax() | currency: currencySymbol}}</div>
      </div>
      <div class="row">
        <div class="col-xs-10 text-right">计税后总费用:</div>
        <div class="col-xs-2 text-right">{{calculateGrandTotal() | currency: currencySymbol}}</div>
      </div>
    </div>
    <div class="row noPrint actions">
      <a href="#" class="btn btn-primary" ng-show="printMode" ng-click="printInfo()">打印</a>
      <a href="#" class="btn btn-primary" ng-click="clearLocalStorage()">重置</a>
      <a href="#" class="btn btn-primary" ng-hide="printMode" ng-click="printMode = true;">打开打印模式</a>
      <a href="#" class="btn btn-primary" ng-show="printMode" ng-click="printMode = false;">关闭打印模式</a>
    </div>
  </div>

  <div ng-hide="printMode" class="copy noPrint">
    <a href="javascript:void(0)">联系我们</a>
    源码出自，稍作修改:
    <span class="love">&#9829;</span>
    <a href="https://github.com/metaware/angular-invoicing" target="_blank">https://github.com/metaware/angular-invoicing</a>
  </div>
</body>
</html>
